<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YShell - 现代UI设计</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        :root {
            --primary-color: #0052d9;
            --primary-hover: #0045b6;
            --secondary-color: #f0f2f5;
            --border-color: #e5e6eb;
            --text-primary: #1f2329;
            --text-secondary: #646a73;
            --text-tertiary: #8f959e;
            --danger-color: #e34d59;
            --success-color: #00a870;
            --warning-color: #ed7b2f;
            --header-height: 48px;
            --status-bar-height: 28px;
        }
        
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #f5f5f5;
            color: var(--text-primary);
            overflow: hidden;
        }
        
        .header {
            height: var(--header-height);
            background-color: #fff;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            padding: 0 16px;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        }
        
        .logo {
            font-weight: bold;
            font-size: 18px;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .logo-icon {
            width: 24px;
            height: 24px;
            background-color: var(--primary-color);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .header-actions {
            display: flex;
            gap: 16px;
        }
        
        .header-action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
            transition: all 0.2s;
        }
        
        .header-action-btn:hover {
            background-color: var(--secondary-color);
            color: var(--primary-color);
        }
        
        /* 连接管理面板 */
        .connection-manager {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .connection-manager.active {
            display: flex;
        }
        
        .connection-panel {
            width: 800px;
            height: 600px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .connection-header {
            height: 56px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
        }
        
        .connection-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .connection-close {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 18px;
        }
        
        .connection-close:hover {
            background-color: var(--secondary-color);
            color: var(--text-primary);
        }
        
        .connection-body {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        .connection-sidebar {
            width: 200px;
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            padding: 12px 0;
        }
        
        .connection-group {
            margin-bottom: 8px;
        }
        
        .connection-group-title {
            padding: 8px 16px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .connection-group-action {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-tertiary);
            font-size: 14px;
        }
        
        .connection-group-action:hover {
            background-color: var(--secondary-color);
            color: var(--primary-color);
        }
        
        .connection-item {
            padding: 8px 16px;
            font-size: 13px;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .connection-item:hover {
            background-color: var(--secondary-color);
        }
        
        .connection-item.active {
            background-color: rgba(0, 82, 217, 0.1);
            color: var(--primary-color);
        }
        
        .connection-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        .connection-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .connection-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .form-row {
            display: flex;
            gap: 16px;
        }
        
        .form-group {
            flex: 1;
        }
        
        .form-label {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .form-input {
            width: 100%;
            height: 36px;
            padding: 0 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            color: var(--text-primary);
            transition: border-color 0.2s;
        }
        
        .form-input:focus {
            border-color: var(--primary-color);
            outline: none;
        }
        
        .form-select {
            width: 100%;
            height: 36px;
            padding: 0 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            color: var(--text-primary);
            background-color: #fff;
            transition: border-color 0.2s;
        }
        
        .form-select:focus {
            border-color: var(--primary-color);
            outline: none;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        
        .form-button {
            padding: 0 16px;
            height: 36px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .form-button.secondary {
            background-color: #fff;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }
        
        .form-button.secondary:hover {
            background-color: var(--secondary-color);
            color: var(--text-primary);
        }
        
        .form-button.primary {
            background-color: var(--primary-color);
            border: 1px solid var(--primary-color);
            color: white;
        }
        
        .form-button.primary:hover {
            background-color: var(--primary-hover);
        }
        
        .main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }
        
        /* 左侧系统信息面板 - 占20% */
        .system-info-panel {
            width: 20%;
            background-color: #fff;
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 16px;
        }
        
        .info-section {
            background-color: var(--secondary-color);
            border-radius: 8px;
            margin-bottom: 16px;
            padding: 12px;
        }
        
        .info-title {
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--text-primary);
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .refresh-icon {
            color: var(--text-tertiary);
            cursor: pointer;
            font-size: 12px;
        }
        
        .refresh-icon:hover {
            color: var(--primary-color);
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 13px;
        }
        
        .info-item .label {
            color: var(--text-secondary);
        }
        
        .info-item .value {
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .progress-container {
            margin-bottom: 12px;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            font-size: 13px;
        }
        
        .progress-label {
            color: var(--text-secondary);
        }
        
        .progress-value {
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .progress-bar {
            height: 6px;
            background-color: rgba(0, 0, 0, 0.08);
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--primary-color);
            border-radius: 3px;
        }
        
        .progress-fill.warning {
            background-color: var(--warning-color);
        }
        
        .progress-fill.danger {
            background-color: var(--danger-color);
        }
        
        /* 右侧内容区 - 占80% */
        .content-area {
            width: 80%;
            display: flex;
            flex-direction: column;
            background-color: var(--secondary-color);
        }
        
        /* 右上方终端区域 - 占70% */
        .terminal-area {
            height: 70%;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid var(--border-color);
            background-color: #fff;
            margin: 12px;
            margin-bottom: 6px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        }
        
        .terminal-tabs {
            height: 40px;
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 8px;
            overflow-x: auto;
            white-space: nowrap;
            border-bottom: 1px solid var(--border-color);
        }
        
        .tab {
            padding: 0 16px;
            height: 32px;
            margin-right: 8px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--text-secondary);
            transition: background-color 0.2s;
        }
        
        .tab:hover {
            background-color: var(--secondary-color);
        }
        
        .tab.active {
            background-color: var(--secondary-color);
            color: var(--primary-color);
            font-weight: 500;
        }
        
        .tab-icon {
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        
        .tab-close {
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            margin-left: 4px;
        }
        
        .tab-close:hover {
            background-color: var(--danger-color);
            color: white;
        }
        
        .terminal {
            flex: 1;
            background-color: #1e1e1e;
            color: #f0f0f0;
            font-family: "Menlo", "Monaco", "Consolas", monospace;
            padding: 12px;
            overflow: auto;
            font-size: 13px;
            line-height: 1.5;
            position: relative;
        }
        
        .terminal-controls {
            position: absolute;
            bottom: 12px;
            right: 12px;
            display: flex;
            gap: 8px;
            background-color: rgba(30, 30, 30, 0.7);
            padding: 6px;
            border-radius: 4px;
        }
        
        .terminal-control-btn {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
        }
        
        .terminal-control-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .command-line {
            color: #f0f0f0;
        }
        
        .command-prompt {
            color: #0cc265;
        }
        
        .command-output {
            color: #b2b2b2;
        }
        
        /* 右下方文件操作区 - 占30% */
        .file-area {
            height: 30%;
            display: flex;
            margin: 0 12px 12px 12px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        }
        
        /* 文件树区域 - 左侧 */
        .file-tree {
            width: 30%;
            background-color: #fff;
            border-right: 1px solid var(--border-color);
            overflow-y: auto;
            padding: 12px 0;
        }
        
        .tree-item {
            padding: 6px 12px;
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            color: var(--text-primary);
        }
        
        .tree-item:hover {
            background-color: var(--secondary-color);
        }
        
        .tree-item.selected {
            background-color: rgba(0, 82, 217, 0.1);
            color: var(--primary-color);
        }
        
        .tree-icon {
            margin-right: 6px;
            font-size: 12px;
            width: 16px;
            text-align: center;
        }
        
        /* 文件内容区域 - 右侧 */
        .file-content {
            width: 70%;
            display: flex;
            flex-direction: column;
        }
        
        .file-toolbar {
            height: 40px;
            background-color: #fff;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            padding: 0 12px;
            gap: 8px;
        }
        
        .file-toolbar-button {
            padding: 4px 10px;
            background-color: #fff;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .file-toolbar-button:hover {
            background-color: var(--secondary-color);
            color: var(--text-primary);
        }
        
        .file-toolbar-button.primary {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .file-toolbar-button.primary:hover {
            background-color: var(--primary-hover);
            color: white;
        }
        
        .file-list {
            flex: 1;
            overflow-y: auto;
        }
        
        .file-header {
            display: flex;
            background-color: #f5f7fa;
            padding: 8px 12px;
            font-weight: 500;
            font-size: 12px;
            color: var(--text-secondary);
            position: sticky;
            top: 0;
            z-index: 1;
        }
        
        .file-name {
            flex: 1;
        }
        
        .file-size, .file-date, .file-perm {
            width: 80px;
            text-align: right;
        }
        
        .file-item {
            display: flex;
            padding: 8px 12px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            font-size: 13px;
            align-items: center;
        }
        
        .file-item:hover {
            background-color: var(--secondary-color);
        }
        
        .file-item.selected {
            background-color: rgba(0, 82, 217, 0.1);
        }
        
        .file-icon {
            margin-right: 8px;
            color: var(--text-tertiary);
            font-size: 14px;
            width: 16px;
            text-align: center;
        }
        
        .file-icon.folder {
            color: var(--primary-color);
        }
        
        .file-item .file-name {
            flex: 1;
            color: var(--text-primary);
        }
        
        .file-item .file-size, .file-item .file-date, .file-item .file-perm {
            width: 80px;
            text-align: right;
            color: var(--text-tertiary);
            font-size: 12px;
        }
        
        .status-bar {
            height: var(--status-bar-height);
            background-color: #fff;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            padding: 0 16px;
            font-size: 12px;
            border-top: 1px solid var(--border-color);
        }
        
        .status-item {
            margin-right: 16px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .status-icon {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--success-color);
            margin-right: 4px;
        }
        
        /* 动态效果模拟 */
        @keyframes progress {
            0% { width: 30%; }
            50% { width: 60%; }
            100% { width: 45%; }
        }
        
        .animate-progress {
            animation: progress 5s infinite alternate;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <div class="logo-icon">Y</div>
            YShell
        </div>
        <div class="header-actions">
            <div class="header-action-btn" title="连接管理">
                <span>🔌</span>
                <span>连接管理</span>
            </div>
            <div class="header-action-btn" title="新建连接">
                <span>+</span>
                <span>新建连接</span>
            </div>
        </div>
    </div>
    
    <div class="main-container">
        <!-- 左侧系统信息面板 - 占20% -->
        <div class="system-info-panel">
            <div class="info-section">
                <div class="info-title">
                    <span>系统信息</span>
                    <span class="refresh-icon">⟳</span>
                </div>
                <div class="info-item">
                    <span class="label">主机名</span>
                    <span class="value">web-server</span>
                </div>
                <div class="info-item">
                    <span class="label">IP地址</span>
                    <span class="value">192.168.1.100</span>
                </div>
                <div class="info-item">
                    <span class="label">操作系统</span>
                    <span class="value">CentOS 7.9</span>
                </div>
                <div class="info-item">
                    <span class="label">运行时间</span>
                    <span class="value">15天7小时</span>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-title">
                    <span>CPU使用率</span>
                    <span class="refresh-icon">⟳</span>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">总体</span>
                        <span class="progress-value">45%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill animate-progress"></div>
                    </div>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">系统</span>
                        <span class="progress-value">15%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 15%"></div>
                    </div>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">用户</span>
                        <span class="progress-value">30%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 30%"></div>
                    </div>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-title">
                    <span>内存使用</span>
                    <span class="refresh-icon">⟳</span>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">内存</span>
                        <span class="progress-value">4.2GB / 8GB</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 52%"></div>
                    </div>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">交换空间</span>
                        <span class="progress-value">0.5GB / 4GB</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 12%"></div>
                    </div>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-title">
                    <span>网络</span>
                    <span class="refresh-icon">⟳</span>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">下载速度</span>
                        <span class="progress-value">1.2 MB/s</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill animate-progress" style="animation-delay: 1s;"></div>
                    </div>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">上传速度</span>
                        <span class="progress-value">0.3 MB/s</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 15%"></div>
                    </div>
                </div>
                <div class="info-item">
                    <span class="label">总下载</span>
                    <span class="value">15.6 GB</span>
                </div>
                <div class="info-item">
                    <span class="label">总上传</span>
                    <span class="value">5.2 GB</span>
                </div>
            </div>
            
            <div class="info-section">
                <div class="info-title">
                    <span>磁盘使用</span>
                    <span class="refresh-icon">⟳</span>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">/</span>
                        <span class="progress-value">56%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 56%"></div>
                    </div>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">/home</span>
                        <span class="progress-value">31%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 31%"></div>
                    </div>
                </div>
                <div class="progress-container">
                    <div class="progress-header">
                        <span class="progress-label">/var</span>
                        <span class="progress-value">85%</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill warning" style="width: 85%"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧内容区 - 占80% -->
        <div class="content-area">
            <!-- 右上方终端区域 - 占70% -->
            <div class="terminal-area">
                <div class="terminal-tabs">
                    <div class="tab active">
                        <span class="tab-icon">🖥️</span>
                        <span>阿里云-Web服务器</span>
                        <span class="tab-close">×</span>
                    </div>
                    <div class="tab">
                        <span class="tab-icon">🖥️</span>
                        <span>腾讯云-数据库服务器</span>
                        <span class="tab-close">×</span>
                    </div>
                    <div class="tab">
                        <span class="tab-icon">🖥️</span>
                        <span>本地测试环境</span>
                        <span class="tab-close">×</span>
                    </div>
                </div>
                
                <div class="terminal">
                    <div class="command-line">
                        <span class="command-prompt">[root@web-server ~]#</span> ls -la
                    </div>
                    <div class="command-output">
                        total 32<br>
                        drwx------  4 root root 4096 Sep 15 10:30 .<br>
                        drwxr-xr-x 22 root root 4096 Sep 15 10:29 ..<br>
                        -rw-------  1 root root  193 Sep 15 10:30 .bash_history<br>
                        -rw-r--r--  1 root root   18 May  3  2020 .bash_logout<br>
                        -rw-r--r--  1 root root  176 May  3  2020 .bash_profile<br>
                        -rw-r--r--  1 root root  176 May  3  2020 .bashrc<br>
                        drwxr-xr-x  3 root root   21 Sep 15 10:29 .config<br>
                        drwxr-xr-x  3 root root   19 Sep 15 10:29 .local
                    </div>
                    <div class="command-line">
                        <span class="command-prompt">[root@web-server ~]#</span> cd /var/www/html
                    </div>
                    <div class="command-line">
                        <span class="command-prompt">[root@web-server html]#</span> ls -la
                    </div>
                    <div class="command-output">
                        total 48<br>
                        drwxr-xr-x  6 root root 4096 Sep 15 11:15 .<br>
                        drwxr-xr-x  4 root root 4096 Sep 15 10:45 ..<br>
                        -rw-r--r--  1 root root 8765 Sep 15 11:10 about.html<br>
                        -rw-r--r--  1 root root 6321 Sep 15 11:12 contact.html<br>
                        drwxr-xr-x  2 root root 4096 Sep 15 11:00 css<br>
                        drwxr-xr-x  2 root root 4096 Sep 15 11:05 images<br>
                        -rw-r--r--  1 root root 15234 Sep 15 11:08 index.html<br>
                        drwxr-xr-x  2 root root 4096 Sep 15 11:02 js
                    </div>
                    <div class="command-line">
                        <span class="command-prompt">[root@web-server html]#</span> _
                    </div>
                    
                    <!-- 终端右下角控制按钮 -->
                    <div class="terminal-controls">
                        <div class="terminal-control-btn" title="连接/断开">
                            <span>🔌</span>
                        </div>
                        <div class="terminal-control-btn" title="快捷指令">
                            <span>⚡</span>
                        </div>
                        <div class="terminal-control-btn" title="终端设置">
                            <span>⚙️</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右下方文件操作区 - 占30% -->
            <div class="file-area">
                <!-- 文件树区域 - 左侧 -->
                <div class="file-tree">
                    <div class="tree-item">
                        <span class="tree-icon">📁</span>
                        <span>/</span>
                    </div>
                    <div class="tree-item">
                        <span class="tree-icon">📁</span>
                        <span>/home</span>
                    </div>
                    <div class="tree-item selected">
                        <span class="tree-icon">📁</span>
                        <span>/var</span>
                    </div>
                    <div class="tree-item" style="padding-left: 28px;">
                        <span class="tree-icon">📁</span>
                        <span>www</span>
                    </div>
                    <div class="tree-item" style="padding-left: 44px;">
                        <span class="tree-icon">📁</span>
                        <span>html</span>
                    </div>
                    <div class="tree-item" style="padding-left: 60px;">
                        <span class="tree-icon">📄</span>
                        <span>about.html</span>
                    </div>
                    <div class="tree-item" style="padding-left: 60px;">
                        <span class="tree-icon">📄</span>
                        <span>contact.html</span>
                    </div>
                    <div class="tree-item" style="padding-left: 60px;">
                        <span class="tree-icon">📁</span>
                        <span>css</span>
                    </div>
                    <div class="tree-item" style="padding-left: 60px;">
                        <span class="tree-icon">📁</span>
                        <span>images</span>
                    </div>
                    <div class="tree-item" style="padding-left: 60px;">
                        <span class="tree-icon">📄</span>
                        <span>index.html</span>
                    </div>
                    <div class="tree-item" style="padding-left: 60px;">
                        <span class="tree-icon">📁</span>
                        <span>js</span>
                    </div>
                </div>
                
                <!-- 文件内容区域 - 右侧 -->
                <div class="file-content">
                    <div class="file-toolbar">
                        <div class="file-toolbar-button primary">
                            <span>⬆️</span>
                            <span>上传</span>
                        </div>
                        <div class="file-toolbar-button">
                            <span>⬇️</span>
                            <span>下载</span>
                        </div>
                        <div class="file-toolbar-button">
                            <span>+</span>
                            <span>新建</span>
                        </div>
                        <div class="file-toolbar-button">
                            <span>🗑️</span>
                            <span>删除</span>
                        </div>
                        <div class="file-toolbar-button">
                            <span>✏️</span>
                            <span>重命名</span>
                        </div>
                        <div class="file-toolbar-button">
                            <span>🔒</span>
                            <span>权限</span>
                        </div>
                        <div class="file-toolbar-button">
                            <span>⟳</span>
                            <span>刷新</span>
                        </div>
                    </div>
                    
                    <div class="file-list">
                        <div class="file-header">
                            <div class="file-name">名称</div>
                            <div class="file-size">大小</div>
                            <div class="file-perm">权限</div>
                            <div class="file-date">修改日期</div>
                        </div>
                        <div class="file-item">
                            <div class="file-icon">📁</div>
                            <div class="file-name">..</div>
                            <div class="file-size">4.0 KB</div>
                            <div class="file-perm">drwxr-xr-x</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                        <div class="file-item">
                            <div class="file-icon">📄</div>
                            <div class="file-name">about.html</div>
                            <div class="file-size">8.7 KB</div>
                            <div class="file-perm">-rw-r--r--</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                        <div class="file-item">
                            <div class="file-icon">📄</div>
                            <div class="file-name">contact.html</div>
                            <div class="file-size">6.3 KB</div>
                            <div class="file-perm">-rw-r--r--</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                        <div class="file-item selected">
                            <div class="file-icon folder">📁</div>
                            <div class="file-name">css</div>
                            <div class="file-size">4.0 KB</div>
                            <div class="file-perm">drwxr-xr-x</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                        <div class="file-item">
                            <div class="file-icon folder">📁</div>
                            <div class="file-name">images</div>
                            <div class="file-size">4.0 KB</div>
                            <div class="file-perm">drwxr-xr-x</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                        <div class="file-item">
                            <div class="file-icon">📄</div>
                            <div class="file-name">index.html</div>
                            <div class="file-size">15.2 KB</div>
                            <div class="file-perm">-rw-r--r--</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                        <div class="file-item">
                            <div class="file-icon folder">📁</div>
                            <div class="file-name">js</div>
                            <div class="file-size">4.0 KB</div>
                            <div class="file-perm">drwxr-xr-x</div>
                            <div class="file-date">2023-09-15</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="status-bar">
        <div class="status-item">
            <span class="status-icon"></span>
            <span>已连接: 阿里云-Web服务器 (192.168.1.100:22)</span>
        </div>
        <div class="status-item">用户: root</div>
        <div class="status-item">路径: /var/www/html</div>
        <div class="status-item">延迟: 56ms</div>
    </div>
    
    <!-- 连接管理面板 -->
    <div class="connection-manager">
        <div class="connection-panel">
            <div class="connection-header">
                <div class="connection-title">连接管理</div>
                <div class="connection-close">×</div>
            </div>
            <div class="connection-body">
                <div class="connection-sidebar">
                    <div class="connection-group">
                        <div class="connection-group-title">
                            <span>常用连接</span>
                            <span class="connection-group-action">+</span>
                        </div>
                        <div class="connection-item active">
                            <span class="connection-icon">🖥️</span>
                            <span>阿里云-Web服务器</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>腾讯云-数据库服务器</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>本地测试环境</span>
                        </div>
                    </div>
                    <div class="connection-group">
                        <div class="connection-group-title">
                            <span>开发环境</span>
                            <span class="connection-group-action">+</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>开发服务器-01</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>开发服务器-02</span>
                        </div>
                    </div>
                    <div class="connection-group">
                        <div class="connection-group-title">
                            <span>生产环境</span>
                            <span class="connection-group-action">+</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>生产服务器-01</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>生产服务器-02</span>
                        </div>
                        <div class="connection-item">
                            <span class="connection-icon">🖥️</span>
                            <span>生产服务器-03</span>
                        </div>
                    </div>
                </div>
                <div class="connection-content">
                    <div class="connection-form">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">连接名称</label>
                                <input type="text" class="form-input" value="阿里云-Web服务器">
                            </div>
                            <div class="form-group">
                                <label class="form-label">连接类型</label>
                                <select class="form-select">
                                    <option selected>SSH</option>
                                    <option>SFTP</option>
                                    <option>FTP</option>
                                    <option>Telnet</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">主机地址</label>
                                <input type="text" class="form-input" value="192.168.1.100">
                            </div>
                            <div class="form-group">
                                <label class="form-label">端口</label>
                                <input type="text" class="form-input" value="22">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">用户名</label>
                                <input type="text" class="form-input" value="root">
                            </div>
                            <div class="form-group">
                                <label class="form-label">认证方式</label>
                                <select class="form-select">
                                    <option selected>密码</option>
                                    <option>密钥</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">密码</label>
                                <input type="password" class="form-input" value="********">
                            </div>
                            <div class="form-group">
                                <label class="form-label">分组</label>
                                <select class="form-select">
                                    <option selected>常用连接</option>
                                    <option>开发环境</option>
                                    <option>生产环境</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">备注</label>
                                <input type="text" class="form-input" value="阿里云Web服务器，用于部署前端应用">
                            </div>
                        </div>
                        <div class="form-actions">
                            <div class="form-button secondary">删除</div>
                            <div class="form-button secondary">测试连接</div>
                            <div class="form-button primary">保存</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
